<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>单选框</title>
    <link rel="stylesheet" href="./view/单选框/styles.css">
</head>
<body>
<!-- Unnamed (Rectangle) -->
<div id="u3923" class="ax_default heading_1">
    <div id="u3923_div" class=""></div>
    <div id="u3923_text" class="text ">
        <p><span>Radio 单选框</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3924" class="ax_default heading_1">
    <div id="u3924_div" class=""></div>
    <div id="u3924_text" class="text ">
        <p><span>概述</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3925" class="ax_default label">
    <div id="u3925_div" class=""></div>
    <div id="u3925_text" class="text ">
        <p><span>基本组件-单选框。主要用于一组可选项单项选择，或者单独用于切换到选中状态。</span></p><p><span><br></span></p><p><span><br></span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3926" class="ax_default label">
    <div id="u3926_div" class=""></div>
    <div id="u3926_text" class="text ">
        <p><span>基础样式</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3927" class="ax_default label">
    <div id="u3927_div" class=""></div>
    <div id="u3927_text" class="text ">
        <p><span>通过selection group实现单选样式及状态切换</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3928" class="ax_default" selectiongroup="radio-list-1" data-left="230" data-top="351" data-width="87" data-height="20">

    <!-- Unnamed (Ellipse) -->
    <div id="u3929" class="ax_default ellipse selected">
        <img id="u3929_img" class="img " src="assets/images/单选框/u3929_selected.svg"/>
        <div id="u3929_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3930" class="ax_default ellipse selected">
        <img id="u3930_img" class="img " src="assets/images/单选框/u3930_selected.svg"/>
        <div id="u3930_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3931" class="ax_default label selected">
        <div id="u3931_div" class="selected"></div>
        <div id="u3931_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';"> Apple</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3932" class="ax_default label">
    <div id="u3932_div" class=""></div>
    <div id="u3932_text" class="text ">
        <p><span>&#149; 垂直样式</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3933" class="ax_default label">
    <div id="u3933_div" class=""></div>
    <div id="u3933_text" class="text ">
        <p><span>按钮样式</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3934" class="ax_default label">
    <div id="u3934_div" class=""></div>
    <div id="u3934_text" class="text ">
        <p><span>通过selection group实现单选样式及状态切换</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3935" class="ax_default box_1" selectiongroup="radio-list-4">
    <div id="u3935_div" class=""></div>
    <div id="u3935_text" class="text ">
        <p><span>北京</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3936" class="ax_default box_1" selectiongroup="radio-list-4">
    <div id="u3936_div" class=""></div>
    <div id="u3936_text" class="text ">
        <p><span>上海</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3937" class="ax_default box_1" selectiongroup="radio-list-4">
    <div id="u3937_div" class=""></div>
    <div id="u3937_text" class="text ">
        <p><span>杭州</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3938" class="ax_default box_1" selectiongroup="radio-list-4">
    <div id="u3938_div" class=""></div>
    <div id="u3938_text" class="text ">
        <p><span>深圳</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3939" class="ax_default box_1" selectiongroup="radio-list-5">
    <div id="u3939_div" class=""></div>
    <div id="u3939_text" class="text ">
        <p><span>北京</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3940" class="ax_default box_1 disabled" selectiongroup="radio-list-5">
    <div id="u3940_div" class="disabled"></div>
    <div id="u3940_text" class="text ">
        <p><span>上海</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3941" class="ax_default box_1" selectiongroup="radio-list-5">
    <div id="u3941_div" class=""></div>
    <div id="u3941_text" class="text ">
        <p><span>杭州</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3942" class="ax_default box_1" selectiongroup="radio-list-5">
    <div id="u3942_div" class=""></div>
    <div id="u3942_text" class="text ">
        <p><span>深圳</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3943" class="ax_default box_1" selectiongroup="radio-list-6">
    <div id="u3943_div" class=""></div>
    <div id="u3943_text" class="text ">
        <p><span>北京</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3944" class="ax_default box_1" selectiongroup="radio-list-6">
    <div id="u3944_div" class=""></div>
    <div id="u3944_text" class="text ">
        <p><span>上海</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3945" class="ax_default box_1" selectiongroup="radio-list-6">
    <div id="u3945_div" class=""></div>
    <div id="u3945_text" class="text ">
        <p><span>杭州</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3946" class="ax_default box_1" selectiongroup="radio-list-6">
    <div id="u3946_div" class=""></div>
    <div id="u3946_text" class="text ">
        <p><span>深圳</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3947" class="ax_default label">
    <div id="u3947_div" class=""></div>
    <div id="u3947_text" class="text ">
        <p><span>尺寸</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3948" class="ax_default box_1" selectiongroup="radio-list-7">
    <div id="u3948_div" class=""></div>
    <div id="u3948_text" class="text ">
        <p><span>北京</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3949" class="ax_default box_1" selectiongroup="radio-list-7">
    <div id="u3949_div" class=""></div>
    <div id="u3949_text" class="text ">
        <p><span>上海</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3950" class="ax_default box_1" selectiongroup="radio-list-7">
    <div id="u3950_div" class=""></div>
    <div id="u3950_text" class="text ">
        <p><span>杭州</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3951" class="ax_default box_1" selectiongroup="radio-list-7">
    <div id="u3951_div" class=""></div>
    <div id="u3951_text" class="text ">
        <p><span>深圳</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3952" class="ax_default box_1" selectiongroup="radio-list-8">
    <div id="u3952_div" class=""></div>
    <div id="u3952_text" class="text ">
        <p><span>北京</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3953" class="ax_default box_1" selectiongroup="radio-list-8">
    <div id="u3953_div" class=""></div>
    <div id="u3953_text" class="text ">
        <p><span>上海</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3954" class="ax_default box_1" selectiongroup="radio-list-8">
    <div id="u3954_div" class=""></div>
    <div id="u3954_text" class="text ">
        <p><span>杭州</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3955" class="ax_default box_1" selectiongroup="radio-list-8">
    <div id="u3955_div" class=""></div>
    <div id="u3955_text" class="text ">
        <p><span>深圳</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3956" class="ax_default label">
    <div id="u3956_div" class=""></div>
    <div id="u3956_text" class="text ">
        <p><span>大</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3957" class="ax_default label">
    <div id="u3957_div" class=""></div>
    <div id="u3957_text" class="text ">
        <p><span>中（默认）</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u3958" class="ax_default label">
    <div id="u3958_div" class=""></div>
    <div id="u3958_text" class="text ">
        <p><span>小</span></p>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3959" class="ax_default" selectiongroup="radio-list-1" data-left="317" data-top="351" data-width="101" data-height="20">

    <!-- Unnamed (Ellipse) -->
    <div id="u3960" class="ax_default ellipse">
        <img id="u3960_img" class="img " src="assets/images/单选框/u3929.svg"/>
        <div id="u3960_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3961" class="ax_default ellipse">
        <img id="u3961_img" class="img " src="assets/images/单选框/u3930.svg"/>
        <div id="u3961_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3962" class="ax_default label">
        <div id="u3962_div" class=""></div>
        <div id="u3962_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';"> Android</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3963" class="ax_default" selectiongroup="radio-list-1" data-left="428" data-top="351" data-width="109" data-height="20">

    <!-- Unnamed (Ellipse) -->
    <div id="u3964" class="ax_default ellipse">
        <img id="u3964_img" class="img " src="assets/images/单选框/u3929.svg"/>
        <div id="u3964_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3965" class="ax_default ellipse">
        <img id="u3965_img" class="img " src="assets/images/单选框/u3930.svg"/>
        <div id="u3965_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3966" class="ax_default label">
        <div id="u3966_div" class=""></div>
        <div id="u3966_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';"> Windows</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3967" class="ax_default" selectiongroup="radio-list-1" data-left="543" data-top="351" data-width="94" data-height="20">

    <!-- Unnamed (Ellipse) -->
    <div id="u3968" class="ax_default ellipse">
        <img id="u3968_img" class="img " src="assets/images/单选框/u3929.svg"/>
        <div id="u3968_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3969" class="ax_default ellipse">
        <img id="u3969_img" class="img " src="assets/images/单选框/u3930.svg"/>
        <div id="u3969_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3970" class="ax_default label">
        <div id="u3970_div" class=""></div>
        <div id="u3970_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';"> Github</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3971" class="ax_default" selectiongroup="radio-list-2" data-left="230" data-top="387" data-width="74" data-height="20">

    <!-- Unnamed (Ellipse) -->
    <div id="u3972" class="ax_default ellipse selected">
        <img id="u3972_img" class="img " src="assets/images/单选框/u3929_selected.svg"/>
        <div id="u3972_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3973" class="ax_default ellipse selected">
        <img id="u3973_img" class="img " src="assets/images/单选框/u3930_selected.svg"/>
        <div id="u3973_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3974" class="ax_default label selected">
        <div id="u3974_div" class="selected"></div>
        <div id="u3974_text" class="text ">
            <p><span>金斑蝶</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3975" class="ax_default" selectiongroup="radio-list-2" data-left="304" data-top="387" data-width="88" data-height="20">

    <!-- Unnamed (Ellipse) -->
    <div id="u3976" class="ax_default ellipse">
        <img id="u3976_img" class="img " src="assets/images/单选框/u3929.svg"/>
        <div id="u3976_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3977" class="ax_default ellipse">
        <img id="u3977_img" class="img " src="assets/images/单选框/u3930.svg"/>
        <div id="u3977_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3978" class="ax_default label">
        <div id="u3978_div" class=""></div>
        <div id="u3978_text" class="text ">
            <p><span>爪哇犀牛</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3979" class="ax_default" selectiongroup="radio-list-2" data-left="392" data-top="387" data-width="88" data-height="20">

    <!-- Unnamed (Ellipse) -->
    <div id="u3980" class="ax_default ellipse">
        <img id="u3980_img" class="img " src="assets/images/单选框/u3929.svg"/>
        <div id="u3980_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3981" class="ax_default ellipse">
        <img id="u3981_img" class="img " src="assets/images/单选框/u3930.svg"/>
        <div id="u3981_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3982" class="ax_default label">
        <div id="u3982_div" class=""></div>
        <div id="u3982_text" class="text ">
            <p><span>印度黑羚</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3983" class="ax_default" selectiongroup="radio-list-3" data-left="230" data-top="464" data-width="87" data-height="20">

    <!-- Unnamed (Ellipse) -->
    <div id="u3984" class="ax_default ellipse selected">
        <img id="u3984_img" class="img " src="assets/images/单选框/u3929_selected.svg"/>
        <div id="u3984_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3985" class="ax_default ellipse selected">
        <img id="u3985_img" class="img " src="assets/images/单选框/u3930_selected.svg"/>
        <div id="u3985_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3986" class="ax_default label selected">
        <div id="u3986_div" class="selected"></div>
        <div id="u3986_text" class="text ">
            <p><span style="font-family:'Ionicons';"></span><span style="font-family:'"Helvetica Neue"', 'Helvetica', '"PingFang SC"', '"Hiragino Sans GB"', '"Microsoft YaHei"', '"微软雅黑"', 'Arial', 'sans-serif';"> Apple</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3987" class="ax_default" selectiongroup="radio-list-3" data-left="230" data-top="493" data-width="107" data-height="17">

    <!-- Unnamed (Ellipse) -->
    <div id="u3988" class="ax_default ellipse">
        <img id="u3988_img" class="img " src="assets/images/单选框/u3929.svg"/>
        <div id="u3988_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3989" class="ax_default ellipse">
        <img id="u3989_img" class="img " src="assets/images/单选框/u3930.svg"/>
        <div id="u3989_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3990" class="ax_default label">
        <div id="u3990_div" class=""></div>
        <div id="u3990_text" class="text ">
            <p><span style="font-family:'Ionicons';"> </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">Android</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3991" class="ax_default" selectiongroup="radio-list-3" data-left="230" data-top="519" data-width="113" data-height="17">

    <!-- Unnamed (Ellipse) -->
    <div id="u3992" class="ax_default ellipse">
        <img id="u3992_img" class="img " src="assets/images/单选框/u3929.svg"/>
        <div id="u3992_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3993" class="ax_default ellipse">
        <img id="u3993_img" class="img " src="assets/images/单选框/u3930.svg"/>
        <div id="u3993_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Rectangle) -->
    <div id="u3994" class="ax_default label">
        <div id="u3994_div" class=""></div>
        <div id="u3994_text" class="text ">
            <p><span style="font-family:'Ionicons';"> </span><span style="font-family:'LucidaGrande', 'Lucida Grande';">Windows</span></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3995" class="ax_default" selectiongroup="radio-list-10" data-left="230" data-top="744" data-width="91" data-height="32">

    <!-- Unnamed (Rectangle) -->
    <div id="u3996" class="ax_default label selected">
        <div id="u3996_div" class="selected"></div>
        <div id="u3996_text" class="text ">
            <p><span>金斑蝶</span></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3997" class="ax_default ellipse selected">
        <img id="u3997_img" class="img " src="assets/images/单选框/u3929_selected.svg"/>
        <div id="u3997_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u3998" class="ax_default ellipse selected">
        <img id="u3998_img" class="img " src="assets/images/单选框/u3930_selected.svg"/>
        <div id="u3998_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u3999" class="ax_default" selectiongroup="radio-list-10" data-left="336" data-top="744" data-width="105" data-height="32">

    <!-- Unnamed (Rectangle) -->
    <div id="u4000" class="ax_default label selected">
        <div id="u4000_div" class="selected"></div>
        <div id="u4000_text" class="text ">
            <p><span>爪哇犀牛</span></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u4001" class="ax_default ellipse selected">
        <img id="u4001_img" class="img " src="assets/images/单选框/u3929_selected.svg"/>
        <div id="u4001_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u4002" class="ax_default ellipse selected">
        <img id="u4002_img" class="img " src="assets/images/单选框/u3930_selected.svg"/>
        <div id="u4002_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</div>

<!-- Unnamed (Group) -->
<div id="u4003" class="ax_default" selectiongroup="radio-list-10" data-left="454" data-top="744" data-width="105" data-height="32">

    <!-- Unnamed (Rectangle) -->
    <div id="u4004" class="ax_default label selected">
        <div id="u4004_div" class="selected"></div>
        <div id="u4004_text" class="text ">
            <p><span>印度黑羚</span></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u4005" class="ax_default ellipse selected">
        <img id="u4005_img" class="img " src="assets/images/单选框/u3929_selected.svg"/>
        <div id="u4005_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u4006" class="ax_default ellipse selected">
        <img id="u4006_img" class="img " src="assets/images/单选框/u3930_selected.svg"/>
        <div id="u4006_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4007" class="ax_default label">
    <div id="u4007_div" class=""></div>
    <div id="u4007_text" class="text ">
        <p><span>显示边框</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u4008" class="ax_default label">
    <div id="u4008_div" class=""></div>
    <div id="u4008_text" class="text ">
        <p><span>4.0版本新增有边框的多选框</span></p>
    </div>
</div>
</body>
</html>
